<app-nav> </app-nav>

<div class="container overview">
  <div class="row">
    <div class="col-sm-12">
      <nav class="mt-4" aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item">
            <a [routerLink]="['/overview']">Overview</a>
          </li>
          <li class="breadcrumb-item active" aria-current="page">{{ nftName }} Commitments</li>
        </ol>
      </nav>
      <div class="box">
        <div class="box-header">
          <div class="row">
            <div class="col-sm-6">
              <h3 class="">{{ nftName }} Commitments</h3>
            </div>
            <div class="col-sm-6">
              <a class="btn btn-primary btn-list pull-right" [routerLink]="['/token/mint']"
                >Mint {{ nftName }} Commitment</a
              >
            </div>
          </div>
        </div>
        <div class="box-body">
          <div class="col-sm-12">
            <div class="row">
              <div
                class="col-md-3 no-padding-left"
                *ngFor="let transaction of transactions; let i = index"
              >
                <div *ngIf="transaction.commitment" class="token-card">
                  <p class="list-token header">{{ transaction.tokenUri }}</p>
                  <p class="list-token">
                    Commitment : {{ transaction.commitment.slice(0, 8) }}...
                  </p>
                </div>
              </div>
            </div>
          </div>
          <ngb-pagination
            *ngIf="!noCommitment"
            class="d-flex justify-content-end zkp-pagination"
            (pageChange)="pageChanged($event)"
            [collectionSize]="totalCollection | async"
            [pageSize]="pageSize"
            [(page)]="pageNo"
            aria-label="Default pagination"
          >
          </ngb-pagination>
          <div class="text-center" *ngIf="noCommitment">
            No Commitments Found
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
